<template>
    <div class="app-header-container">
      <img src="../assets/header-left.png" alt="">
      <div class="app-header">
        {{title}}
      </div>
      <img src="../assets/header-right.png" alt="">
    </div>
</template>

<script>

  import * as Constant from './common/Constant';

    export default {
        name: 'AppHeader',
        data() {
            return {
              title: Constant.TITLE,
            }
        },
        computed:{

        },
        methods:{

        },
        mounted(){

        },
        created(){

        }
    }
</script>

<style lang="stylus" scoped>
  .app-header-container
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 19px;
    img
      opacity: 0.85;
  .app-header
    background-image: linear-gradient(-180deg, rgba(255,255,255,0.10) 0%, rgba(29,71,170,0.16) 50%);
    border: 2px solid #344B84;
    margin-left: -1px;
    margin-right: -1px;
    border-left-width: 0;
    border-right-width: 0;
    opacity: 0.9;
    font-family: PingFang-SC-Bold;
    font-size: 18px;
    color: #79ADE9;
    text-shadow: 0 5px 9px rgba(147,157,237,0.50);
    padding: 7px 14px;
</style>
